<template>
    <div class="main">
        <el-aside class="aside" width="200px">
            <el-menu
                    default-active=""
                    class="menu"
                    :router="true"
                    @open="handleOpen"
                    @close="handleClose">
                <el-menu-item index="/user">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">用户中心</span>
                </el-menu-item>

                <el-submenu index="/emp">
                    <template slot="title">
                        <i class="el-icon-user-solid"></i>
                        <span>员工管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/emp">账号管理</el-menu-item>
                        <el-menu-item index="/checkEmp">员工审核</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/order">
                    <i class="el-icon-document"></i>
                    <span slot="title">订单中心</span>
                </el-menu-item>
                <el-submenu index="/product">
                    <template slot="title">
                        <i class="el-icon-box"></i>
                        <span>产品管理</span>
                    </template>
                    <el-menu-item-group>
                        <el-menu-item index="/swiper">轮播图管理</el-menu-item>
                        <el-menu-item index="/category">产品分类</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>
                <el-menu-item index="/checkReview">
                    <i class="el-icon-document"></i>
                    <span slot="title">评论审核</span>
                </el-menu-item>
                <el-menu-item index="/moneyRecord">
                    <i class="el-icon-document"></i>
                    <span slot="title">平台流水</span>
                </el-menu-item>
            </el-menu>
        </el-aside>
        <el-main>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item v-for="(item,index) in breadList"
                                    :key="index"
                                    :to="{ path: item.path }">
                    {{item.name}}
                </el-breadcrumb-item>
            </el-breadcrumb>
            <router-view></router-view>
        </el-main>
    </div>
</template>

<script>
    export default {
        name: "Main",
        data() {
            return {
                breadList: [

                    {
                        name:'',
                        path:''
                    },
                    {
                        name:'',
                        path:''
                    }

                ]
            };
        },
        // 监听属性
        watch: {
            //监听路由
            $route() {
                this.getBreadcrumb();
            }
        },

        created(){
            this.getBreadcrumb();
        },

        methods: {
            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },

            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },

            getBreadcrumb() {
                var matched=this.$route.matched; //拿到显示的路由路径
                //console.log(matched);
                if(matched[1].name=='用户中心'){
                    this.breadList[0].name='用户中心'
                    this.breadList[0].path='/user'
                    this.breadList[1].path='';
                    this.breadList[1].name='';
                }
                if(matched[1].name=='轮播图管理' || matched[1].name=='产品分类'){
                    this.breadList[0].name='产品管理'
                    this.breadList[0].path='/product'
                    this.breadList[1].path=matched[1].path;
                    this.breadList[1].name=matched[1].name;
                }
                if(matched[1].name=='评论审核'){
                    this.breadList[0].name='评论审核'
                    this.breadList[0].path='/checkReview'
                    this.breadList[1].path='';
                    this.breadList[1].name='';
                }
                if(matched[1].name=='平台流水'){
                    this.breadList[0].name='平台流水'
                    this.breadList[0].path='/moneyRecord'
                    this.breadList[1].path='';
                    this.breadList[1].name='';
                }
                if(matched[1].name=='订单中心'){
                    this.breadList[0].name='订单中心'
                    this.breadList[0].path='/order'
                    this.breadList[1].path='';
                    this.breadList[1].name='';
                }
                if(matched[1].name=='账号管理' || matched[1].name=='员工审核'){
                    this.breadList[0].name='员工管理'
                    this.breadList[0].path='/order'
                    this.breadList[1].path=matched[1].path;
                    this.breadList[1].name=matched[1].name;
                }
            }
        },
    }
</script>

<style scoped>
    .main{
        display: flex;
        height: 100%
    }
    .el-menu-item span.text{
        font-size: 16px
    }

    .el-menu-item i.iconfont{
        font-size: 20px;
        margin: 0 15px 0 10px
    }

    .container{
        display: flex;
        flex: 12;
        width: 100%;
        justify-content: center;
        padding: 20px 9% 0;
        box-sizing: border-box;
        /* 元素内的内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容 */
        /*overflow: scroll*/
    }

    .container
        /* 隐藏滚动条 */
    ::-webkit-scrollbar{
        display: none
    }

    .content{
        width: 100%;
    }

    audio{
        width: 100%;
        border-radius: unset;
        outline: none
    }
</style>
